<template>
  <el-dialog :visible.sync="visible" width="1400px" :close-on-click-modal="false">
    
    <div class="tablist">
      <span class="name" v-for="(item, index) in filterTabs" :class="{ active: (activeTab.value === item.value) }"
        @click="onChangeState(item)" :key="index">
        <el-badge :value="item.number" :hidden="!item.number">
          {{ item.name }}
        </el-badge>
      </span>
    </div>
    <XmTable
      v-show="['1-1','1-2','2-1','2-2'].includes(activeTab.value)"
      :config="{
        ...tableConfig,
        columns: getColumns(),
        getParams: getParams
      }" class="table" ref="table">
      <div slot="filter">
        <el-form :inline="true" class="pl-20">
          <el-form-item label="范围" v-xmbz-permission="'inquiry_abnormal_notice_all'" v-if="['2-1','2-2'].includes(activeTab.value)">
            <div class="form-all" >
              <el-tooltip content="去除勾选，将只能查看到自己提交的工单记录" placement="top-start">
                <i class="el-icon-info fz-24 mr-5"></i>
              </el-tooltip>
              <el-checkbox size='small' class="mr-10" border v-model="isCheckAll" @change="handleAllChange">
                查看所有人提交记录
              </el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="时间" style="margin-bottom: 0px !important;" v-if="activeTab.hasTime">
            <el-date-picker v-model="time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" size='small'
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="后台单号" style="margin-bottom: 0px !important;">
            <el-input size='small' v-model="xmbzNo" placeholder="后台单号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetch" size='small' plain icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <template slot="column-printingState" slot-scope="{data}">
        <span v-if='data.printingState == 1'>未打印</span>
        <span v-if='data.printingState == 2'>已打印</span>
      </template>
      <template slot="column-processState" slot-scope="{data}">
        <el-tag v-if="stateMap[data.processState]" :type="stateMap[data.processState].type">{{stateMap[data.processState].label}}</el-tag>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button type="primary" size="mini" @click="customHandle(data, 1)">
          处理完成
        </el-button>
        <el-button size="mini" @click="customHandle(data, 2)" style="margin: 5px 0 0 0">
          无需处理
        </el-button>
      </template>
    </XmTable>

    <updateGoodsTable v-show="['3-1','3-2','3-3'].includes(activeTab.value)" ref="updateGoodsTable" @fetch="handleUpdateGoodsAfterFetch"></updateGoodsTable>

    <complaintWorkorder v-xmbz-permission="'inquiry_abnormal_notice_complaint'" v-show="['4-1'].includes(activeTab.value)" ref="complaintWorkorder"></complaintWorkorder>
  </el-dialog>
</template>

<script>
import { tableConfig } from './config'
import { customServiceChoice } from '@/api/workorder'
import updateGoodsTable from './updateGoodsWorkorder/updateGoodsTable'
import complaintWorkorder from './complaintWorkorder'
import { mapGetters } from 'vuex'
const stateMap = {
  0: {
    label: '未处理',
    type: 'info',
  },
  1: {
    label: '处理完成',
    type: 'success',
  },
  2: {
    label: '无需处理',
    type: 'info',
  }
}

const tabs = [
  //标签数据
  {
    name: "异常工单列表",
    value: '1-1',
    processState: '0',
    businessType: '1',
    hasOperate: true,
    number: 0,
    code: 'inquiry_abnormal_notice_workorder',
  },
  {
    name: "异常工单记录",
    value: '1-2',
    processState: '1,2',
    businessType: '1',
    hasTime: true,
  },
  {
    name: "新增二维码退款",
    value: '2-1',
    processState: '0',
    businessType: '2',
    hasOperate: true,
    number: 0,
    code: 'inquiry_abnormal_notice_qrcode',
  },
  {
    name: "新增二维码退款记录",
    value: '2-2',
    processState: '1,2',
    businessType: '2',
    hasTime: true,
  },
  {
    name: "修改款式工单",
    value: '3-1',
    number: 0,
    code: 'inquiry_abnormal_notice_updategoods',
  },
  {
    name: "改款工单记录",
    value: '3-2',
  },
  {
    name: "审核未通过的改款工单",
    value: '3-3',
    number: 0,
  },
  {
    name: "投诉责任人",
    value: '4-1',
    code: 'inquiry_abnormal_notice_complaint',
  },
]

export default {
  props: {
  },
  components: {
    updateGoodsTable,
    complaintWorkorder,
  },
  data() {
    return {
      visible: false,
      tableConfig,
      tabs,
      stateMap,
      time: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString()
      ],
      xmbzNo: '',
      activeTab: {
        value: '1-1'
      },
      isCheckAll: true,
    }
  },
  computed: {
    ...mapGetters(['permission', 'abnormalNum', 'refundCodeNum', 'updateGoodsNum', 'updateGoodNotPassNum']),
    filterTabs() {
      return tabs.filter(item => !item.code || this.permission[item.code])
    },
    isAll() {
      return this.permission['inquiry_abnormal_notice_all'] ?
              this.isCheckAll ? 1
              : 0 : 0
    }
  },
  methods: {
    show() {
      if (this.visible) {
        return
      }
      this.visible = true
      this.activeTab = this.filterTabs[0]
      this.fetch()
    },
    fetch() {
      this.$refs.table && this.$refs.table.fetch().then(res => {
        return this.$store.dispatch('getNum')
      })
    },
    getParams() {
      const pageParams = this.$refs.table.getPageParams()
      const params = {
        ...pageParams,
        processState: this.activeTab.processState,
        businessType: this.activeTab.businessType,
        xmbzNo: this.xmbzNo,
        all: ['2-1','2-2'].includes(this.activeTab.value) ? this.isAll : undefined
      }
      if (this.time && this.activeTab.hasTime) {
        params.startTime = this.dayjs(this.time[0])
          .format("YYYY-MM-DD")
          .toString()
        params.endTime = this.dayjs(this.time[1])
          .format("YYYY-MM-DD")
          .toString()
      }
      return params
    },
    handleUpdateGoodsAfterFetch(res) {
      return this.$store.dispatch('getNum')
    },
    getColumns() {
      return this.activeTab.hasOperate ? tableConfig.columns : tableConfig.columns.filter(item => {
        return item.prop != 'operate'
      })
    },
    onChangeState(item) {
      this.activeTab = item
      if (['1-1','1-2','2-1','2-2'].includes(item.value)) {
        this.xmbzNo = ''
        this.fetch()
      } else if (['3-1','3-2','3-3'].includes(item.value)) {
        this.$refs.updateGoodsTable.fetch({activeTab: this.activeTab});
      } else if (['4-1'].includes(item.value)) {
        this.$refs.complaintWorkorder.fetch();
      }
    },
    customHandle(data, processState) {
      customServiceChoice({id: data.id, processState}).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: "操作成功！",
          });
          this.fetch()
          this.$emit('customHandle')
        } else {
          this.$message({
            type: "error",
            message: res.data.msg || "操作失败！",
          });
        }
      })
    },
    getAuths() {
      const userInfo = JSON.parse(window.localStorage.getItem("saber-userInfo")).content;
      const authoritys = userInfo.authority.split(',');
      return authoritys;
    },
    handleAllChange() {
      this.$nextTick(() => {
        if (['1-1','1-2','2-1','2-2'].includes(this.activeTab.value)) {
          this.fetch()
        }
      })
    },
  },
  watch: {
    abnormalNum(next) {
      this.tabs.find(item => item.value == '1-1').number = next
    },
    refundCodeNum(next) {
      this.tabs.find(item => item.value == '2-1').number = next
    },
    updateGoodsNum(next) {
      this.tabs.find(item => item.value == '3-1').number = next
    },
    updateGoodNotPassNum(next) {
      this.tabs.find(item => item.value == '3-3').number = next
    },
  },
  created() {
    this.userInfo = JSON.parse(window.localStorage.getItem("saber-userInfo")).content
    this.authoritys = this.userInfo.authority.split(',')
  }
}
</script>

<style lang="scss" scoped>
.form-all {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  height: 40px;
}
.tablist {
  display: flex;
  margin-bottom: 20px;

  .name {
    padding: 0 20px;
    text-align: center;
    color: #000;
    line-height: 40px;
    cursor: pointer;
    font-size: 16px;

    &.active {
      color: #43a0ff;
      border-bottom: 1px solid #43a0ff;
    }
  }
}
</style>
